今天提到 immuable，對於程式當中儲存的資料來說，
如果你存的資料可以被更改，那你永遠不知道誰改了你的原始資料，
為了避免這種情況發生，我們就必須要有 immuable，
相信寫 React 的大家常常會使用到這種方式來避免原始資料被破壞。

譬如我今天有個儲存 array 的資料

const array = [1,2,4,6];

array[0] = 2;

console.log(array); // [2,2,4,6]

有發現上面的 array 變數被改變了嗎？
從原本 [1,2,4,6] 變成 [2,2,4,6]

那如果有個 object 呢？

const objA = {x:1,y:2,}

objA[x] = 3;

console.log(objA); // {x:3,y:2}

有發現嗎？上面的 array 和 obj 都輕易的被更改，
如果是共用變數，那使用的人，改到最後就會不知道哪些地方改到，
進一步讓原始資料變的不乾淨，解決得方式就是 immutable。

那 immutable 在 javaScript ES6 就提供了好用的方式。
分別是 Spread operator 展開運算子和 Rest operator 其餘運算子。

譬如以上的範例，就可以改成以下這樣

const array = [1,2,4,6];
const [_,...rest] = array;

const arrayCopy = [3,...rest];

console.log(array); // [2,2,4,6]
console.log(arrayCopy); // [3,2,4,6]

const objA = {x:1,y:2};
const objACopy = {...objA,x:3};

console.log(objA); // {x:1,y:2};
console.log(objACopy); // {x:3,y:2}

發現了嗎？這樣子改動的 copy 都不會改動到原本的 array 和 object,
就是原本的值不是 call by reference 而只是將原本的值 coby 一份，
給新的變數。所以就不會改動到原本變數裡的值。

https://dev.to/mpodlasin/functional-programming-in-js-part-ii-immutability-vanilla-js-immutable-js-and-immer-2ccm